<template>
    <div>
        <div class="SettleMent">
            <div class="header">
                <div class="head">
                    结算
                    <router-link tag="div" to="/HomeView" class="img">
                        <svg t="1668317136857" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2055" width="200" height="200">
                            <path d="M224.45 538.68l575.11-346.21-0.05-68.75-575.03 345.61-0.03 69.35z" p-id="2056"
                                fill="#484848"></path>
                            <path d="M224.45 538.68l575.08 356.96v-69.52L224.48 469.33l-0.03 69.35z" p-id="2057"
                                fill="#484848"></path>
                        </svg>
                    </router-link>
                </div>

                <div class="listbox">

                    <div class="lists">
                        <div class="list" v-for="(item, index) in buylists" :Key="index">
                            <div class="img">
                                <img :src="item.bookCover" alt="">
                            </div>

                            <div class="textbox">
                                <div class="title">
                                    {{ item.bookName }}
                                </div>
                                <div class="pricebox">
                                    <div class="price">
                                        ￥{{ item.vipPrice }}
                                    </div>

                                    <div class="num">
                                        X <span>{{item.num}}</span>
                                    </div>
                                </div>

                            </div>

                        </div>

                       
                    </div>


                    <div class="goodsbox">
                        <div class="Pricebox">
                            <div class="price">
                                产品总价：
                            </div>
                            <div class="number">
                                {{ total }}
                            </div>
                        </div>
                    </div>

                    <div class="paybox">
                        实付： <span>￥{{ total }}</span>
                    </div>



                </div>
            </div>

            <div class="paybigbox">
                <div class="paybox">

                    <div class="img">
                        <svg t="1668321863726" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3067" width="200" height="200">
                            <path
                                d="M492.343 777.511c-67.093 32.018-144.129 51.939-227.552 32.27-83.424-19.678-142.626-73.023-132.453-171.512 10.192-98.496 115.478-132.461 202.07-132.461 86.622 0 250.938 56.122 250.938 56.122s13.807-30.937 27.222-66.307c13.405-35.365 17.21-63.785 17.21-63.785H279.869v-35.067h169.995v-67.087l-211.925 1.526v-44.218h211.925v-100.63h111.304v100.629H788.35v44.218l-227.181 1.524v62.511l187.584 1.526s-3.391 35.067-27.17 98.852c-23.755 63.783-46.061 96.312-46.061 96.312L960 685.279V243.2C960 144.231 879.769 64 780.8 64H243.2C144.231 64 64 144.231 64 243.2v537.6C64 879.769 144.231 960 243.2 960h537.6c82.487 0 151.773-55.806 172.624-131.668L625.21 672.744s-65.782 72.748-132.867 104.767z"
                                p-id="3068" fill="#1296db"></path>
                            <path
                                d="M297.978 559.871c-104.456 6.649-129.974 52.605-129.974 94.891s25.792 101.073 148.548 101.073c122.727 0 226.909-123.77 226.909-123.77s-141.057-78.842-245.483-72.194z"
                                p-id="3069" fill="#1296db"></path>
                        </svg>

                        <p>支付宝支付</p>
                    </div>

                    <div class="checkbox">
                        <input type="radio" name="ded">
                    </div>

                </div>

                <div class="paybox">

                    <div class="img">
                        <svg t="1668324444679" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3906" width="200" height="200">
                            <path
                                d="M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z"
                                fill="#09BB07" p-id="3907"></path>
                        </svg>
                        <p>微信支付</p>
                    </div>

                    <div class="checkbox">
                        <input type="radio"  checked="checked"  name="ded">
                    </div>
                </div>

              

            </div>


            <div class="footer">
                <div class="foot">
                    <p @click="paybox">确定支付</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

    data() {
        return {
            buylists: [],
            total: "",
            linkMath:[]
        }
    },

    created() {
        this.buylists = JSON.parse(window.localStorage.getItem("linkMath"))
        this.total = JSON.parse(window.localStorage.getItem("total"))
        console.log("buylists", this.buylists)
    },

    methods:{
        paybox(){
            localStorage.setItem("buylists",JSON.stringify(this.buylists))
            localStorage.setItem("linkMath",JSON.stringify(this.linkMath))
            this.$toast("已支付");
            this.$router.push("/OrderView")
        }
    }


}
</script>

<style lang="scss" scoped>
.SettleMent {

    .footer {
        width: 100%;
        position: fixed;
        bottom: 0px;
        background-color: #fff;
        padding-top: 10px;
        padding-bottom: 10px;

        .foot {
            display: flex;
            justify-content: space-around;

            p {
                color: #fff;
                font-size: 16px;
                padding: 13px 140px;
                background-color: #d57c5b;
                border-radius: 25px;
            }
        }
    }


    .header {
        padding-top: 12px;
        background-color: #fff;
        padding-bottom: 10px;

        .head {
            font-size: 18px;
            text-align: center;
            position: relative;
            padding-left: 6px;
            color: #000;
            border-bottom: 2px solid #f3f3f3;
            padding-bottom: 8px;
            font-weight: bold;

            .img {
                position: absolute;
                top: 0px;

                .icon {
                    width: 20px;
                    height: 20px;
                }
            }
        }

        .listbox {
            padding-top: 8px;
            padding-left: 16px;
            padding-right: 16px;

            .lists {
                border-bottom: 2px solid #f3f3f3;

                .list {
                    display: flex;
                    padding-bottom: 8px;


                    .img {
                        img {
                            width: 73px;
                            height: 100px;
                        }

                        margin-right: 6px;
                    }

                    .textbox {
                        flex: 1;
                        display: flex;

                        flex-direction: column;
                        // justify-content: space-between;

                        .title {
                            font-size: 14px;
                            font-weight: bold;
                            color: #000;
                            padding-bottom: 66px;
                        }

                        .pricebox {
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;

                            .price {
                                font-size: 12px;
                                color: #b0b9c8;
                            }

                            .num {
                                font-size: 12px;
                                color: #b0b9c8;
                            }


                        }
                    }



                }
            }

            .goodsbox {
                padding-top: 10px;
                // padding-left: 16px;
                // padding-right: 16px;

                .Pricebox {
                    display: flex;
                    margin-bottom: 10px;
                    align-items: baseline;
                    justify-content: space-between;
                    border-bottom: 2px solid #f3f3f3;
                    padding-bottom: 6px;

                    .price {
                        font-size: 13px;
                        color: #354055;
                        font-weight: bold;
                    }

                    .number {
                        font-size: 13px;
                        color: #f96d61;
                        font-weight: bold;
                    }
                }
            }

            .paybox {
                color: #485365;
                font-size: 12px;
                display: flex;
                justify-content: flex-end;
                align-items: baseline;
                font-weight: bold;

                span {
                    color: #f96d61;
                    font-size: 14px;
                    font-weight: bold;
                }
            }


        }

    }


    .paybigbox {
        padding: 10px 20px 5px 20px;
        background-color: #fff;
        margin-top: 8px;

        .paybox {

            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            .img {

                display: flex;
                align-items: center;

                .icon {
                    width: auto;
                    height: 20px;
                }

                p {
                    font-size: 12px;
                    margin-left: 2px;
                    color: #111e35;
                    font-weight: bold;
                }
            }

            .checkbox {}
        }
    }

}
</style>